<template>
  <div class="tagProduct">
    <div class="search-nav">
      <!-- 搜索框 -->
      <div class="search-box">
        <div class="icon-glass">
          <span class="bi bi-search"></span>
        </div>
        <div class="icon-input">
          <input
            type="text"
            placeholder="点击搜索商品"
            v-model="proName"
            @keydown.enter="search"
          />
        </div>
        <div class="icon-cancel" @click="deleFn">
          <span class="bi bi-x-circle"></span>
        </div>
      </div>
      <!-- 点击回上一页 -->
      <div class="search-cancel" @click="backFun">
        <span>取消</span>
      </div>
    </div>
    <!-- 历史搜索 -->
    <div class="search-history" v-if="isShow">
      <div class="history-title">
        <div class="his-l">
          <span>历史搜索</span>
        </div>
        <div class="his-r" @click="clearFn">
          <span class="bi bi-trash"></span>
        </div>
      </div>
      <div class="history-list" ref="lists">
        <ul>
          <li
            v-for="(item, index) in hisList"
            :key="index"
            @click="jumpTo(item.txt)"
          >
            <span>{{ item.txt }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 热门搜索 -->
    <div class="search-top">
      <div class="top-title">
        <span>热门搜索</span>
      </div>
      <div class="top-list" ref="topList">
        <ul>
          <li
            v-for="(item, index) in array"
            :key="index"
            @click="jumpTo(item.text)"
          >
            <span>{{ item.text }}</span>
          </li>
        </ul>
      </div>
      <div class="updown" @click="unwind">
        <span v-if="!isCur" class="bi bi-chevron-compact-down"></span>
        <span v-if="isCur" class="bi bi-chevron-compact-up"></span>
      </div>
      <div class="updown-Two" v-if="isFlag" @click="upFlod">
        <span v-if="!isAct" class="bi bi-chevron-compact-down"></span>
        <span v-if="isAct" class="bi bi-chevron-compact-up"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array: [
        {
          text: "爆款年货",
        },
        {
          text: "花王",
        },
        {
          text: "补水面膜",
        },
        {
          text: "家居服女",
        },
        {
          text: "唐狮女装",
        },
        {
          text: "雀巢奶粉",
        },
        {
          text: "美赞臣",
        },
        {
          text: "拉面说",
        },
        {
          text: "彩虹面膜",
        },
        {
          text: "维生素D",
        },
      ],
      isShow: "",
      isFlag: false,
      proName: "",
      hisList: [],
      isCur: false,
      isAct: false,
    };
  },
  methods: {
    // 回到上一级目录
    backFun() {
      this.$router.go(-1);
    },
    upFlod() {
      // 显示和隐藏超出的部分
      this.isAct = !this.isAct;
      if (this.isAct == true) {
        this.$refs.lists.style.overflow = "inherit";
      }
      if (this.isAct == false) {
        this.$refs.lists.style.overflow = "hidden";
      }
    },
    unwind() {
      // 显示和隐藏超出的部分
      this.isCur = !this.isCur;
      if (this.isCur == true) {
        this.$refs.topList.style.overflow = "inherit";
      }
      if (this.isCur == false) {
        this.$refs.topList.style.overflow = "hidden";
      }
    },
    deleFn() {
      // 清除数据
      this.proName = "";
    },
    clearFn() {
      //清空历史记录
      this.hisList = "";
      //清除本地缓存
      localStorage.removeItem("obj");
    },
    unique(txt) {
      let newArr = [];
      for (let i = 0; i < txt.length; i++) {
        if (newArr.indexOf(txt[i]) == -1) {
          newArr.push(txt[i]);
        }
      }
      return newArr;
    },
    search() {
      //获取v1的数据
      let v1 = this.proName;
      //创建对象
      let obj = {};
      obj.txt = v1;
      this.hisList.push(obj);
      //数据的唯一
      function unique(arr) {
        var res = [];
        var obj = {};
        for (var i = 0; i < arr.length; i++) {
          if (!obj[arr[i]]) {
            obj[arr[i]] = 1;
            res.push(arr[i]);
          }
        }
        return res;
      }
      let array = unique(this.hisList);
  
      // this.hisList = array;
      //保存到本地
      localStorage.setItem("obj", JSON.stringify(this.hisList));
      //跳转到product
      this.$router.push({
        path: "/product",
        name: "Product",
        params: { v1: v1 },
      });

      // 当长度大于10的时候清空
      if (this.hisList.length > 10) {
        this.hisList = [];
      }
      // console.log(this.hisList,"111");
      //清空input
      this.proName = "";
    },
    jumpTo(text) {
      let txt = text;
      this.$router.push({
        path: "/product",
        name: "Product",
        params: { v1: text },
      });
    },
    init() {
      let searchword = localStorage.getItem("obj");
      if (searchword != null) {
        this.hisList = JSON.parse(searchword);
        //  console.log(searchword,222)
        //  console.log(this.hisList,111);
      }

      // 当长度大于10的时候清空
      if (this.hisList.length > 10) {
        this.hisList = [];
      }
    },
  },
  created() {
    // 初始化界面
    this.init();

    if (this.hisList.length == 0) {
      this.isShow = false;
    } else {
      this.isShow = true;
    }
  },
  updated() {
    if (this.hisList.length != 0) {
      this.isShow = true;
    }
    if (this.hisList.length > 5) {
      this.isFlag = true;
    }
  },
};
</script>

<style lang="less">
@import "../../assets/css/reset.css";
@import "../../assets/less/variable.less";

.tagProduct {
  width: 100%;
  height: 667px;
  background: #fff;
}

.search-nav {
  width: 100%;
  height: 60px;
  background: #fff;
  display: flex;
}
.search-box {
  width: 88%;
  height: 60px;
  position: relative;
  .icon-glass {
    width: 20px;
    height: 20px;
    position: absolute;
    margin-top: 20px;
    margin-left: 22px;
    font-size: 16px;
    z-index: 1000;
  }
  .icon-input {
    position: absolute;
    input {
      width: 275px;
      height: 38px;
      background: #f1f2f4;
      border-radius: 20px;
      outline: none;
      border: none;
      margin-top: 10px;
      margin-left: 10px;
      font-size: 16px;
      padding-left: 38px;
    }
  }
  .icon-cancel {
    width: 20px;
    height: 20px;
    position: absolute;
    margin-left: 90%;
    margin-top: 20px;
    font-size: 16px;
  }
}
.search-cancel {
  width: 10%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 16px;
}

// 历史搜索
.search-history {
  width: 100%;
  height: 150px;
  background: #fff;
  .history-title {
    height: 40px;
    line-height: 40px;
    .his-l {
      float: left;
      padding-left: @padding2;
      font-size: 16px;
    }
    .his-r {
      float: right;
      padding-right: @padding2;
      font-size: 18px;
    }
  }
  .history-list {
    width: 360px;
    height: 80px;
    overflow: hidden;
    margin-left: 5px;
    ul li {
      display: inline-block;
      padding: 5px 15px;
      border-radius: 20px;
      background: #edeef0;
      margin-right: 10px;
      margin-bottom: 10px;
      font-size: 12px;
    }
  }
}
//热门搜索
.search-top {
  width: 100%;
  padding-left: @padding2;
  padding-right: @padding2;
  box-sizing: border-box;
  background: #fff;
  .top-title {
    width: 100%;
    height: 30px;
    font-size: 16px;
    margin-top: 15px;
  }
  .top-list {
    height: 70px;
    // background: chartreuse;
    overflow: hidden;
    ul li {
      padding: 6px 12px;
      display: inline-block;
      color: #ad00e6;
      background: #f0f1f3;
      border-radius: 20px;
      margin-left: 10px;
      margin-top: 5px;
      font-size: 12px;
    }
  }
}
.updown {
  width: 30px;
  height: 30px;
  position: absolute;
  margin-top: -30px;
  margin-left: 320px;
  background: #f0f1f3;
  border-radius: 50%;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}
.updown-Two {
  width: 30px;
  height: 30px;
  position: absolute;
  margin-top: -150px;
  margin-left: 320px;
  background: #f0f1f3;
  border-radius: 50%;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}
</style>